<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="../assets/libs/amazeui/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/libs/amazeui/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="../assets/libs/amazeui/js/echarts.min.js"></script>
    <link rel="stylesheet" href="../assets/libs/amazeui/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/libs/amazeui/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="../assets/libs/amazeui/css/app.css">
    <link rel="stylesheet" href="../assets/css/core.css">
    <script src="../assets/libs/amazeui/js/jquery.min.js"></script>

</head>

<body data-type="chart" page-text="图表">
    <script src="../assets/libs/amazeui/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 内容区域 -->
        <div class="tpl-content-wrapper content-margin-left">

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 图表 <small>Amaze UI</small></div>
                        <p class="page-header-description">图表组件使用的是 <a href="http://echarts.baidu.com">百度图表echarts</a>。</p>
                    </div>
                    <div class="am-u-lg-3 tpl-index-settings-button">
                        <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">折线</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div style="height: 400px" class="" id="tpl-echarts-A">

                        </div>
                    </div>
                </div>


                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">雷达</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div style="height: 400px" id="tpl-echarts-B">

                        </div>
                    </div>
                </div>


                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">折线柱图</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div style="height: 400px" id="tpl-echarts-C">

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <script src="../assets/libs/amazeui/js/amazeui.min.js"></script>
    <script src="../assets/libs/amazeui/js/amazeui.datatables.min.js"></script>
    <script src="../assets/libs/amazeui/js/dataTables.responsive.min.js"></script>
    <script src="../assets/js/util/inner.js"></script>

    <script>
        // ===============================================
        // 图表页
        // ===============================================
        function chartData() {
            // ==========================
            // 百度图表A http://echarts.baidu.com/
            // ==========================

            var echartsC = echarts.init(document.getElementById('tpl-echarts-C'));


            optionC = {
                tooltip: {
                    trigger: 'axis'
                },

                legend: {
                    data: ['蒸发量', '降水量', '平均温度']
                },
                xAxis: [{
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }],
                yAxis: [{
                    type: 'value',
                    name: '水量',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                    {
                        type: 'value',
                        name: '温度',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [{
                    name: '蒸发量',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '平均温度',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };

            echartsC.setOption(optionC);

            var echartsB = echarts.init(document.getElementById('tpl-echarts-B'));
            optionB = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 'center',
                    data: ['某软件', '某主食手机', '某水果手机', '降水量', '蒸发量']
                },
                radar: [{
                    indicator: [
                        { text: '品牌', max: 100 },
                        { text: '内容', max: 100 },
                        { text: '可用性', max: 100 },
                        { text: '功能', max: 100 }
                    ],
                    center: ['25%', '40%'],
                    radius: 80
                },
                    {
                        indicator: [
                            { text: '外观', max: 100 },
                            { text: '拍照', max: 100 },
                            { text: '系统', max: 100 },
                            { text: '性能', max: 100 },
                            { text: '屏幕', max: 100 }
                        ],
                        radius: 80,
                        center: ['50%', '60%'],
                    },
                    {
                        indicator: (function() {
                            var res = [];
                            for (var i = 1; i <= 12; i++) {
                                res.push({ text: i + '月', max: 100 });
                            }
                            return res;
                        })(),
                        center: ['75%', '40%'],
                        radius: 80
                    }
                ],
                series: [{
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
                    data: [{
                        value: [60, 73, 85, 40],
                        name: '某软件'
                    }]
                },
                    {
                        type: 'radar',
                        radarIndex: 1,
                        data: [{
                            value: [85, 90, 90, 95, 95],
                            name: '某主食手机'
                        },
                            {
                                value: [95, 80, 95, 90, 93],
                                name: '某水果手机'
                            }
                        ]
                    },
                    {
                        type: 'radar',
                        radarIndex: 2,
                        itemStyle: { normal: { areaStyle: { type: 'default' } } },
                        data: [{
                            name: '降水量',
                            value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
                        },
                            {
                                name: '蒸发量',
                                value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
                            }
                        ]
                    }
                ]
            };
            echartsB.setOption(optionB);
            var echartsA = echarts.init(document.getElementById('tpl-echarts-A'));
            option = {

                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['邮件', '媒体', '资源']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],

                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '邮件',
                    type: 'line',
                    stack: '总量',
                    areaStyle: { normal: {} },
                    data: [120, 132, 101, 134, 90, 230, 210],
                    itemStyle: {
                        normal: {
                            color: '#59aea2'
                        },
                        emphasis: {

                        }
                    }
                },
                    {
                        name: '媒体',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: {} },
                        data: [220, 182, 191, 234, 290, 330, 310],
                        itemStyle: {
                            normal: {
                                color: '#e7505a'
                            }
                        }
                    },
                    {
                        name: '资源',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: {} },
                        data: [150, 232, 201, 154, 190, 330, 410],
                        itemStyle: {
                            normal: {
                                color: '#32c5d2'
                            }
                        }
                    }
                ]
            };
            echartsA.setOption(option);
        }

        $(function(){
            chartData();
        })
    </script>

</body>

</html>